<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>邮箱登陆</title>
    <style>
        body
        {
            margin:0;
            padding: 0;
            font-family: sans-serif;
            background: url(https://lanan.oss-cn-beijing.aliyuncs.com/tag/beach-g981a2b176_1920.jpg);
            background-size: cover;
        }
        .box
        {
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width:400px;
            padding: 40px;
            background: rgba(142, 213, 84, 0.07);
            box-sizing : border-box;
            box-shadow: 0 15px 25px rgba(0,0,0,.5);
            border-radius: 10px;
        }
        .box h2
        {
            margin:0 0 30px;
            padding: 0;
            color: #fff;
            text-align: center;
        }
        .box .inputBox
        {
            position: relative;
        }
        .box .inputBox input
        {
            width:100%;
            padding: 10px 0;
            font-size: 16px;
            color: #fff;
            letter-spacing: 1px;
            margin-bottom: 30px;
            border: none;
            border-bottom: 1px solid #fff;
            outline: none;
            background: transparent;
        }
        .box .inputBox label
        {
            position: absolute;
            top:0;
            left: 0;
            padding: 10px 0;
            letter-spacing: 1px;
            font-size: 16px;
            color: #fff;
            pointer-events: none;
            transition: .5s;
        }
        .box .inputBox input:focus ~ label,
        .box .inputBox input:valid ~ label
        {
            top:-18px;
            left:0;
            color:#03a9f4;
            font-size: 12px;
        }
        .box button {
            border: 0;
            background: none;
            text-transform: uppercase;
            color: #0a31ee;
            font-weight: bold;
            position: relative;
            outline: none;
            padding: 10px 20px;
            box-sizing: border-box;
        }
        button::before, button::after {
            box-sizing: inherit;
            position: absolute;
            content: '';
            border: 2px solid transparent;
            width: 0;
            height: 0;
        }

        button::after {
            bottom: 0;
            right: 0;
        }

        button::before {
            top: 0;
            left: 0;
        }

        button:hover::before, button:hover::after {
            width: 100%;
            height: 100%;
        }

        button:hover::before {
            border-top-color: #4361ee;
            border-right-color: #4361ee;
            transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
        }

        button:hover::after {
            border-bottom-color: #4361ee;
            border-left-color: #4361ee;
            transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
        }
    </style>
</head>
<body>
<div class="box">
    <h2>邮箱登录</h2>
    <div class="inputBox">
        <input type="email" name="email2" required="">
        <label>邮箱</label>
    </div>
    <div class="inputBox">
        <input type="password" name="password2" required="">
        <label>密码</label>
    </div>
    <button type="button" id="btn1">
        <span style="font-size:110%!important">Login</span>
    </button>
    <script src="/static/theme/default/js/jquery.min.js"></script>
    <script src="/static/theme/default/libs/layer/layer.js"></script>
    <script src="/static/theme/default/js/app.js"></script>
    <script src="/static/theme/default/js/RegExpValidator.js"></script>
    <script type="application/javascript">
        jQuery(function($) {
            let email_password_flag = false;
            let email_email_flag = false;

            //检验密码
            $("input[name='password2']").on('change',function(e){
                email_password_flag = pwd($("input[name='password2']"), e);
            })

            //检验邮箱
            $("input[name='email2']").on('change',function(e){
                email_email_flag = clickEmail($("input[name='email2']"), e);
            })

            //login
            $("#btn1").on('mousedown',function(e){
                if(email_password_flag && email_email_flag){
                    req("post", "/api/email_login", {
                        email:  $.trim($("input[name='email2']").val()),
                        password: $.trim($("input[name='password2']").val()),
                    }, function (data) {
                        if (data.code === 200) {
                            setTimeout(function () {
                                layer.alert('登录成功', {
                                    skin: 'layui-layer-molv' //样式类名  自定义样式
                                    ,closeBtn: 1    // 是否显示关闭按钮
                                    ,anim: 1 //动画类型
                                    ,btn: ['前往首页面'] //按钮
                                    ,icon: 6    // icon
                                    ,yes:function(){
                                        window.parent.location.reload();//刷新父页面
                                        //当你在iframe页面关闭自身时
                                        let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                        parent.layer.close(index); //再执行关闭
                                    }
                                });
                            }, 700);
                        } else {
                            err(data.description);
                        }
                    });
                }else{
                    err("邮箱或密码错误！");
                }
            });
        });
    </script>
</div>
</body>
</html>
